<!--
	作者：819115696@qq.com
	时间：2016-06-23
	描述：https://git.oschina.net/RobertGoudan/HB.git
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/test.js"></script>
		<style>
			* {
				margin: 0px;
			}
			
			.d {
				margin-top: 50px;
				width: 400px;
				height: 400px;
				background-color: lavenderblush;
			}
			
			#listBox td:hover {
				background-color: lightblue;
			}
			
			#listBox {
				width: 100px;
				position: absolute;
				border: 1px solid lawngreen;
				overflow-x: hidden;
				overflow-y: auto;
				display: none;
				background-color: white;
			}
			
			#listBox td {
				width: 300px;
				padding: 3px;
				padding-left: 5px;
				border: 1px solid #F3EEEE;
			}
			
			#listBox tr {
				border: 1px solid lightgreen;
			}
			
			#listBox .pitchOn {
				background-color: #F08080 !important;
			}
			
			#inputBox {
				width: 200px;
				margin: 30px;
				height: 20px;
			}
			 .chufa{
				background-color: lavender;
				width: 10px;
				position: absolute;
				border: 1px solid lightgray;
			}
		</style>
		<script>
			$(function() {
				//init();
				a1("#inputBox")

					//a2() 
			})
			function a3() {
            var ftable = $("<table  border='0' cellspacing='0'></table>");
            $("body").append(ftable)
        }
        function a2(finput) {
            var sx = "测试1,测试2,测试3,测试4,测试5,"
            var ax = sx.split(",");
            var ftable = $("<table  border='0' cellspacing='0' style='width: 100%'></table>");
            for (i = 0; i < ax.length - 1; i++) {//注意最后一个逗号,
                console.log(ax[i] + "-");
                var td = $("<td style='border:none ;'></td>").text(ax[i]);
                ftable.append($("<tr></tr>").append(td))
            }
            $(finput).after($("<div id='listBox' style='display: none;position:absolute;background-color: white;border: 1px solid #78B4FF;'></div>").append(ftable))
        }
        function a1(inputx) {//绑定下拉多选,参数1:输入框元素,2:触发下拉元素
            a2(inputx)
            var s = $(inputx).offset();
            $("<div class='chufa'></div>").appendTo("body");
            var sx = $(inputx).get(0);
            $("#listBox").css("top", s.top + $(inputx).outerHeight());
            $("#listBox").css("left", s.left);
            $("#listBox").css("width", $(inputx).outerWidth())
            $(".chufa").css("height", $(inputx).outerHeight() - 2)
            $(".chufa").css("top", s.top);
            $(".chufa").css("left", s.left + $(inputx).outerWidth() - 10);
            $("#listBox tr").each(function (i) {
                if (i % 2 != 0) {
                    $(this).css("background-color", "#F3EEEE")
                }
            })
            bx = true;

            $("body").delegate(inputx, "click", function () {
                $("#listBox").css("display", "block")
                if (bx) {

                } else {

                }
            })
            $("body").delegate(".chufa", "click", function () {
                if ($("#listBox").css("display") == "none") {
                    $("#listBox").css("display", "block")
                } else {
                    $("#listBox").css("display", "none")
                }

            })
            $("body").delegate("#listBox td", "click", function () {
              
                $(this).toggleClass("pitchOn")
                var thisclass = $(this).attr('class');
                if(thisclass)
                if ($(this).css("background-color") == "rgb(240, 128, 128)") {
                } else {
                }
                var s2 = ""
                $(".pitchOn").each(function (i) {
                    s2 += $(this).text() + ",";
                })
                $(inputx).val(s2)
            })
        }
		</script>
	</head>

	<body>
		<div class="d">
			
			<input type="text" id="inputBox" />
			
			
		</div>
	</body>

</html>